<template>
  <section>
    <div class="slider-top slider1 hm4slider slider-2">
      <div class="tt-mslide-wrapper">
        <div class="swiper-container" data-loop="1">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="tt-mslide one">
                <div class="tt-mslide-entry slide1">
                  <div class="container">
                    <div class="row">
                      <div class="col-sm-12 col-md-12">
                        <div class="slider_content">
                          <div class="tt-mslide-title white text-animation" data-animation="zoomIn">
                            <h3>Maintain your body fitness</h3>
                            <p>It seems that only fragments of the original text remain in the Lorem
                              Ipsum texts used today.
                            </p>
                          </div>
                          <div class="main-contc">
                            <div class="wrapper-inner-tab-backgrounds-first">
                              <a href="contactus.html">
                                <div class="sim-button button8 text-animation" data-animation="zoomIn">
                                  <span>Contact Us</span>
                                </div>
                              </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="tt-mslide two">
                <div class="tt-mslide-entry slide2">
                  <div class="container">
                    <div class="row">
                      <div class="col-sm-12 col-md-12">
                        <div class="slider_content">
                          <div class="tt-mslide-title white text-animation" data-animation="zoomIn">
                            <h3>Maintain your body fitness</h3>
                            <p>It seems that only fragments of the original text remain in the Lorem
                              Ipsum texts used today.
                            </p>
                          </div>
                          <div class="main-contc">
                            <div class="wrapper-inner-tab-backgrounds-first">
                              <a href="contactus.html">
                                <div class="sim-button button8 text-animation" data-animation="zoomIn">
                                  <span>Contact Us</span>
                                </div>
                              </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="tt-mslide three">
                <div class="tt-mslide-entry slide3">
                  <div class="container">
                    <div class="row">
                      <div class="col-sm-12 col-md-12">
                        <div class="slider_content">
                          <div class="tt-mslide-title white text-animation" data-animation="zoomIn">
                            <h3>Maintain your body fitness</h3>
                            <p>It seems that only fragments of the original text remain in the Lorem
                              Ipsum texts used today.
                            </p>
                          </div>
                          <div class="main-contc">
                            <div class="wrapper-inner-tab-backgrounds-first">
                              <a href="contactus.html">
                                <div class="sim-button button8 text-animation" data-animation="zoomIn">
                                  <span>Contact Us</span>
                                </div>
                              </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-pagination fixed swiper-pagination-white"></div>
          </div>
        </div>
      </div>
    </div>
    <!--================ Our slider Section end =================-->
    <div class="about-fitaza fitaza-1 cellpadding">
      <div class="container">
        <div class="row">
          <div class="col-sm-6 col-md-6">
            <div class="fitazas">
              <div class="fitaza">
                <h1>Welcome To <span>Fitness</span></h1>
                <h3>健身的真正含义是什么？没有亲身体验过的人永远不懂。健身，意味着我们每天都在和同龄人拉开距离；健身，意味着你摆脱平庸，追求卓越……最近流行这样一句话：当别人在喝酒、泡吧的时候，我们在健身房挥汗如雨……不管怎样，做好健身过程的每一件小事，认真对待自己的身体，才是让健身有意义的第一步
                </h3>
                <h3>你想和风赛跑吗？请加入我们专业健身的网站吧！我们给你一个追风的时代！</h3>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="Polygon">
              <img src="@/assets/images/index/plo.png" alt="Polygon" class="img-responsive">
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--================classes we offer Section start=================-->
    <section class="main-offer client_common">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 col-md-12">
            <div class="traning">
              <h2>Traning</h2>
              <h3><span>Classes</span> We Offer</h3>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="main-classes">
          <div class="row">
            <div class="col-md-12">
              <div class="owl-carousel owl-carousel10 owl-theme">
                <div class="item">
                  <div class="Running-Classes">
                    <div class="image image-opacity-on-hover image-zoom-on-hover">
                      <img src="@/assets/images/index-2/2.jpg" alt="Image 1" class="img-responsive">
                    </div>
                    <div class="datetimes">
                      <h3>$<span>40</span></h3>
                    </div>
                    <div class="c-enter">
                      <h4>Raw Fitness Classes</h4>
                      <p>Lorem ipsum dolor sit amet, consectetur adi-
                        piscing elit, sed do eiusmod tempor incididunt
                        ut labore et dolore magna aliqua.
                      </p>
                      <a href="raw-fitness.html" class="readmore">Read more</a>
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="Running-Classes">
                    <div class="image image-opacity-on-hover image-zoom-on-hover">
                      <img src="@/assets/images/index-2/3.jpg" alt="Image 1" class="img-responsive">
                    </div>
                    <div class="datetimes">
                      <h3>$<span>40</span></h3>
                    </div>
                    <div class="c-enter">
                      <h4>Body Building Classes</h4>
                      <p>Lorem ipsum dolor sit amet, consectetur adi-
                        piscing elit, sed do eiusmod tempor incididunt
                        ut labore et dolore magna aliqua.
                      </p>
                      <a href="body-building.html" class="readmore">Read more</a>
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="Running-Classes">
                    <div class="image image-opacity-on-hover image-zoom-on-hover">
                      <img src="@/assets/images/index-2/4.jpg" alt="Image 1" class="img-responsive">
                    </div>
                    <div class="datetimes">
                      <h3>$<span>40</span></h3>
                    </div>
                    <div class="c-enter">
                      <h4>Body Combat Classes</h4>
                      <p>Lorem ipsum dolor sit amet, consectetur adi-
                        piscing elit, sed do eiusmod tempor incididunt
                        ut labore et dolore magna aliqua.
                      </p>
                      <a href="body-combact.html" class="readmore">Read more</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--section-->
    <!-- gallery -->
    <div class="topclass home1topclass cellpadding">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 col-md-12">
            <div class="classes">
              <h2>Our<span> Gallery</span></h2>
              <p>时尚健身一起来，数字互动更精彩。
              </p>
            </div>
            <!--classes-->
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-sm-4 col-md-4 col-xs-12">
            <div class="runing">
              <div class="image-opacity-on-hover image-zoom-on-hover">
                <img src="@/assets/images/index-2/5.jpg" alt="Image 1" class="img-responsive">
              </div>
            </div>
            <div class="runing">
              <div class="image-opacity-on-hover image-zoom-on-hover">
                <img src="@/assets/images/index-2/8.jpg" alt="Image 1" class="img-responsive">
              </div>
            </div>
            <!--run-->
          </div>
          <!--col-->
          <div class="col-sm-4 col-md-4 col-xs-12">
            <div class="runing">
              <div class="image-opacity-on-hover image-zoom-on-hover">
                <img src="@/assets/images/index-2/6.jpg" alt="Image 1" class="img-responsive">
              </div>
            </div>
            <div class="runing">
              <div class="image-opacity-on-hover image-zoom-on-hover">
                <img src="@/assets/images/index-2/9.jpg" alt="Image 1" class="img-responsive">
              </div>
            </div>
            <!--run-->
          </div>
          <!--col-->
          <div class="col-sm-4 col-md-4 col-xs-12">
            <div class="runing">
              <div class="image-opacity-on-hover image-zoom-on-hover">
                <img src="@/assets/images/index-2/7.jpg" alt="Image 1" class="img-responsive">
              </div>
            </div>
            <div class="runing">
              <div class="image-opacity-on-hover image-zoom-on-hover">
                <img src="@/assets/images/index-2/10.jpg" alt="Image 1" class="img-responsive">
              </div>
            </div>
            <!--run-->
          </div>
        </div>
        <!--row-->
      </div>
      <!--container-->
    </div>
    <!--topclass-->
    <section class="care">
      <div class="getfit  cellpadding">
        <div class="container">
          <div class="row">
            <div class="col-sm-12 col-md-12">
              <div class="Weeks">
                <h1>Take care of your body. It’s the only place<br>
                  you have to live.
                </h1>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--================latest-say Section start=================-->
  
</section>
 
</template>

<script>

  $(function(){ 
      $('#owl-example').owlCarousel(); 
  });
  export default {
    name: 'Index',
  }
</script>

<style>
</style>
